<template>
  <el-row class="container">
    <v-head :account="account"/>
    <el-col :span="24" class="main">
      <el-col id="div" :span="4">
        <sider :msg="list"/>
      </el-col>
      <el-col :span="20" class="content-wrapper" id="divs">
        <section class="contentCon">
          <div>
            <router-view></router-view>
          </div>
        </section>
      </el-col>
    </el-col>
  </el-row>
</template>

<script>
  import VHead from './components/header/Header.vue'
  import moment from 'moment'
  import Sider from './components/Sider.vue'
  import axios from 'axios'

  export default {
    name: 'Home',
    components: {
      'v-head': VHead,
      Sider
    },
    data () {
      return {
        account: '',
        list: []
      }
    },
    methods: {},
    mounted () {
      this.account = sessionStorage.getItem('username')
      // console.log(this.account)
      window.document.getElementById('div').style.height = window.innerHeight - 65 + 'px'
      window.document.getElementById('divs').style.height = window.innerHeight - 80 + 'px'
      axios({
        method: 'get',
        url: `${this.BASE_URL}/menu/getMenu`,
        responseType: 'json',
        params: {
          account: this.account
        }
      }).then((response) => {
        this.list = response.data.data
      }).catch(() => {
        this.loading = false
      })
    }
  }
</script>
<style scoped>
  .el-menu-item {
    height: auto;
  }

  .el-submenu .el-menu-item {
    min-width: inherit !important;
  }

  .container {
    padding-top: 60px;
    height: 100%;
    margin-left: -8px;
    background-color: #F2F2F2;
  }

  .el-menu-vertical-demo {
    background-color: #48576a;
    border-top: ridge 3px;
  }

  #div {
    /*height: auto;*/
    background-color: white;
    overflow: auto;
  }

  .contentCon {
    overflow: auto;
  }

  #divs {
    overflow: auto;
  }
</style>
